<template>
  <div>
    <!--搜索-->
    <div class="toolbar">
      <el-text class="mx-1">姓名:&nbsp;</el-text>
      <el-input
        v-model="param.name"
        placeholder="请输入"
        style="width: 200px; margin-right: 10px"
      />
      <el-text class="mx-1">联系方式:&nbsp;</el-text>
      <el-input
        v-model="param.mobile"
        placeholder="请输入"
        style="width: 200px; margin-right: 10px"
      />
      <el-text class="mx-1">状态:&nbsp;</el-text>
      <el-select
        v-model="param.status"
        placeholder="请选择"
        style="width: 100px; margin-right: 20px"
      >
        <el-option label="全部" :value="2" />
        <el-option label="启用" :value="0" />
        <el-option label="禁用" :value="1" />
      </el-select>
      <el-button type="primary" @click="getUser">查询</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
      <el-button type="primary" @click="addUser">添加用户</el-button>
    </div>
    <!-- 表格数据 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="编号" align="center" width="180px" />
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column prop="mobile" label="手机号" align="center" />
      <el-table-column prop="sex" label="性别" align="center">
        <template #default="{ row }">
          <span v-if="row.sex == 1">男</span>
          <span v-else-if="row.sex == 2">女</span>
        </template>
      </el-table-column>
      <el-table-column prop="role_id" label="角色" align="center">
        <template #default="{ row }">
          <span v-if="row.role_id == 1">用户</span>
          <span v-else-if="row.role_id == 2">管理员</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="0"
            :inactive-value="1"
            class="ml-2"
            width="60"
            inline-prompt
            active-text="启用"
            inactive-text="禁用"
            @change="updateStatusById(row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="操作" align="center">
        <template #default="{ row }">
          <div class="mb-4">
            <el-button type="warning" plain @click="updateUs(row)"
              >修改</el-button
            >
            <el-button type="danger" plain @click="deleteUserById(row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div style="background-color: #fff">
      <el-pagination
        layout="prev, pager, next,sizes,total,jumper"
        :total="total"
        @current-change="chpage"
        @size-change="chsize"
      />
    </div>

    <!-- UserUpdate 组件，isShow 控制其显示，传递 selectedUser 数据 -->
    <UserUpdate
      ref="userUpdates"
      :visible="isShow"
      :user="selectedUser"
      @close="isShow = false"
      @refreshUserList="getUser"
    />
    <UserAdd
      ref="userAdd"
      :visible="isShows"
      @close="isShows = false"
      @refreshUserList="getUser"
    />
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import { getUserList, updateStatus, deleteUser } from "@/api/user/user.js";
import UserUpdate from "./UserUpdate.vue";
import UserAdd from "./UserAdd.vue";

const userUpdates = ref(null);
const userAdd = ref(null);
const tableData = ref([]);
let isShow = ref(false);
let isShows = ref(false);
let selectedUser = ref(null); // 用来存储选中的用户数据
let param = ref({
  page: 1,
  pageSize: 10,
  name: "",
  mobile: "",
  status: 2
});
const total = ref(0); // 总记录数

/**
 * 获取用户信息列表
 */
async function getUser() {
  let res = await getUserList(param.value);
  if (res.code == 200) {
    tableData.value = res.data.list;
    param.value.page = res.data.page;
    param.value.pageSize = res.data.pageSize;
    total.value = res.data.total;
  }
}

/**
 * 修改用户状态
 * @param row 用户行数据
 */
async function updateStatusById(row) {
  let res = await updateStatus({
    id: row.id,
    status: row.status
  });
}

/**
 * 删除用户
 * @param row 用户行数据
 */
async function deleteUserById(row) {
  let res = await deleteUser(row.id);
  if (res.code == 200) {
    ElMessage.success("删除成功！");
    getUser(); // 刷新用户列表
  } else {
    ElMessage.error("删除失败！");
  }
}

function addUser() {
  isShows.value = true;
}

/**
 * 打开修改用户对话框
 * @param row 用户数据
 */
function updateUs(row) {
  selectedUser.value = row; // 将选中的用户数据传递给 selectedUser
  isShow.value = true; // 显示修改对话框
}

/**
 * 重置输入框内容
 */
function reset() {
  param.value = {
    page: 1,
    pageSize: 10,
    name: "",
    mobile: "",
    status: 2
  };
  getUser();
}

// 分页处理
function chpage(pg) {
  param.value.page = pg;
  getUser();
}

function chsize(ps) {
  param.value.pageSize = ps;
  param.value.page = 1;
  getUser();
}

// 初始化加载列表
onBeforeMount(() => {
  getUser();
});
</script>

<style scoped></style>
